<template>
  <div class="contents">
    <el-row :gutter="10" type="flex" align="middle">
      <el-col>
        <el-input
          placeholder="请输入司机名称"
          v-model="deliveryDirverQuery.driverName"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="goToCheak()"
          ></el-button>
        </el-input>
      </el-col>
      <el-col>
        <!-- 这里绑定了change时间,当绑定值变化时触发该事件-->
        <el-checkbox
          v-model="forbid"
          style="margin-left: 15px"
          @change="setForbid()"
        >
          不显示禁用账号
        </el-checkbox>
      </el-col>
      <el-col style="text-align: right">
        <el-button type="primary" icon="el-icon-plus" @click="addBtn()">
          新增
        </el-button>
      </el-col>
    </el-row>
    <!-- 新增dialog -->
    <el-dialog title="新增" :visible.sync="addDialogVisible" width="520px">
      <el-form label-width="80px" :model="deliveryDriver" ref="addform">
        <el-form-item label="用户名" prop="userName">
          <el-input
            v-model="deliveryDriver.userName"
            maxlength="64"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input
            v-model="deliveryDriver.pwd"
            maxlength="64"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="司机名称" prop="deliveryDriverName">
          <el-input
            v-model="deliveryDriver.deliveryDriverName"
            maxlength="64"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phoneNumber">
          <el-input
            v-model="deliveryDriver.phoneNumber"
            maxlength="11"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="司机权限">
          <el-checkbox v-model="deliveryDriver.receiptsChangeAuthority">
            实收变更
          </el-checkbox>
          <el-checkbox v-model="deliveryDriver.returnBillAuthority">
            退货单
          </el-checkbox>
          <div style="color: rgb(204, 204, 204); font-size: 13px">
            勾选后司机可以在司机端对已完成的订单进行实收变更及退货
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCancel()">取 消</el-button>
        <el-button type="primary" @click="addSave()">保存</el-button>
      </span>
    </el-dialog>
    <!-- 编辑dialog -->
    <el-dialog title="编辑" :visible.sync="editDialogVisible" width="520px">
      <el-form label-width="80px" :model="deliveryDriverChild">
        <el-form-item label="用户名">
          <el-input
            v-model="deliveryDriverChild.userName"
            maxlength="64"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="deliveryDriverChild.pwd"
            maxlength="64"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="司机名称">
          <el-input
            v-model="deliveryDriverChild.deliveryDriverName"
            maxlength="64"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input
            v-model="deliveryDriverChild.phoneNumber"
            maxlength="11"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="司机权限">
          <el-checkbox v-model="deliveryDriverChild.receiptsChangeAuthority">
            实收变更
          </el-checkbox>
          <el-checkbox v-model="deliveryDriverChild.returnBillAuthority">
            退货单
          </el-checkbox>
          <div style="color: rgb(204, 204, 204); font-size: 13px">
            勾选后司机可以在司机端对已完成的订单进行实收变更及退货
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSave">保存</el-button>
      </span>
    </el-dialog>
    <el-table
      :data="table1"
      @cell-mouse-enter="enter"
      @cell-mouse-leave="leave"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column prop="deliveryDriverName" label="司机"></el-table-column>
      <el-table-column prop="phoneNumber" label="电话"></el-table-column>
      <el-table-column prop="userName" label="登录账号"></el-table-column>
      <el-table-column prop="status" label="禁用状态">
        <template slot-scope="scope">
          <!-- 这里利用三目运算符将 '禁用状态行'的内容(int型)渲染成了禁用或正常(string型) -->
          {{ scope.row.status == 0 ? '禁用' : '正常' }}

          <div v-show="scope.row.id === isshow" class="el-butotn-div">
            <div class="div-layout">
              <span @click="editAreaName(scope.$index, scope.row)">编辑</span>
              <span
                @click="hideGoods(scope.$index, scope.row)"
                v-show="scope.row.status == 1"
              >
                禁用
              </span>
              <span
                @click="recoveryGoods(scope.$index, scope.row)"
                v-show="scope.row.status == 0"
              >
                恢复
              </span>
              <span @click="delAreaName(scope.$index, scope.row)">删除</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, prev, pager, next,sizes, jumper"
      :page-sizes="[10, 20, 30, 40, 100]"
      style="text-align: right"
      :current-page="currentPage1"
      :total="total"
      :page-size="count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import {
  add,
  edit,
  getList,
  del,
  paging,
  check,
} from '@/api/distribution/driver'
export default {
  data() {
    return {
      drivername: '',
      addDialogVisible: false,
      editDialogVisible: false,
      forbid: true,
      isshow: -1,
      deliveryDirverQuery: { driverName: '', status: null }, //高级查询对象.
      //分页组件属性定义：
      table1: [], //客户类型-分页查询。
      count: 20,
      currentPage1: 1,
      total: 0,
      //配送司机对象。(新增)
      deliveryDriver: {
        userName: '',
        pwd: '',
        deliveryDriverName: '',
        phoneNumber: null,
        relevanceCar: '',
        receiptsChangeAuthority: null,
        returnBillAuthority: null,
      },
      //配送司机对象。(编辑)
      deliveryDriverChild: {
        userName: '',
        pwd: '',
        deliveryDriverName: '',
        phoneNumber: null,
        relevanceCar: '',
        receiptsChangeAuthority: null,
        returnBillAuthority: null,
      },
    }
  },
  mounted() {
    this.pagingQuery()
  },
  methods: {
    //分页查询
    pagingQuery() {
      this.listLoading = true //数据加载loading动画。
      //控制是否显示禁用账号.
      if (this.forbid == false) {
        this.deliveryDirverQuery.status = null
      } else if (this.forbid == true) {
        this.deliveryDirverQuery.status = 1
      }
      paging(this.currentPage1, this.count, this.deliveryDirverQuery).then(
        (res) => {
          console.log('司机分页数据', res.data)
          this.table1 = res.data.list
          this.total = res.data.total
        }
      )
    },
    //新增按钮。
    addBtn() {
      this.addDialogVisible = true
      this.$refs['addform'].resetFields() //清除input内容。
    },
    //新增-保存按钮。
    async addSave() {
      const res = await add(this.deliveryDriver)
      if (res.status == 200) {
        this.$message({
          type: 'success',
          message: '新增成功',
        })
      }
      this.pagingQuery()
      this.$refs['addform'].resetFields() //清除input内容。
      this.addDialogVisible = false
    },
    //新增-取消。
    addCancel() {
      this.addDialogVisible = false
      this.$refs['addform'].resetFields() //清除input内容。
    },
    enter(row, column, cell) {
      this.isshow = row.id
    },
    leave(row, column, cell) {
      this.isshow = -1
    },
    //查询。
    goToCheak() {
      this.pagingQuery()
    },
    //分页点击事件。
    handleSizeChange(val) {
      this.count = val
      this.pagingQuery()
    },
    //分页点击事件。
    handleCurrentChange(val) {
      this.currentPage1 = val
      this.pagingQuery()
    },
    //编辑按钮。
    editAreaName(index, item) {
      this.editDialogVisible = true
      this.deliveryDriverChild = JSON.parse(JSON.stringify(item))
    },
    //编辑-保存按钮。
    async editSave() {
      console.log(this.deliveryDriverChild)
      const res = await edit(this.deliveryDriverChild)
      console.log('editsave-->', res)
      if (res.status == 200) {
        this.$message({
          type: 'success',
          message: '编辑成功',
        })
      }
      this.editDialogVisible = false
      this.pagingQuery()
    },
    //恢复商品
    async recoveryGoods(index, data) {
      console.log('恢复商品--->', index, data)
      this.$confirm('确定恢复当前账号 ?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.show(data)
      })
    },
    async show(data) {
      let params = data
      params.status = 1
      let res = await edit(params)
      if (res.status == '200') {
        this.$message.success('恢复成功')
        this.pagingQuery()
      } else {
        this.$message(res.message)
      }
    },
    //禁用商品
    async hideGoods(index, data) {
      console.log('禁用商品--->', index, data)
      this.$confirm('确定禁用当前账号 ?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.hide(data)
      })
    },
    async hide(data) {
      let params = data
      params.status = 0
      let res = await edit(params)
      if (res.status == '200') {
        this.$message.success('禁用成功')
        this.pagingQuery()
      } else {
        this.$message(res.message)
      }
    },
    async setForbid() {
      // this.forbid =!this.forbid
      await this.pagingQuery()
      console.log('forbid', this.forbid)
    },
    // //删除。
    // async delAreaName(index, data) {
    //   console.log('删除', data)
    //   this.$confirm(
    //     '此操作将永久删除[' + data.name + ']区域, 是否继续?',
    //     '提示',
    //     {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning',
    //     }
    //   )
    //     //确认按钮执行
    //     .then(() => {
    //       this.toDel(data.id)
    //     })
    //     //确认按钮执行
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消删除',
    //       })
    //     })
    // },

    //删除。
     delAreaName(index, data) {
      console.log('删除', data)
      this.$confirm(
        '此操作将永久删除[' + data.userName + ']职位, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.toDel(data.id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    async toDel(e) {
      let res = await del(e)
      console.log(res, '9999999999')
      if (res.status == 200) {
        this.$message.success('删除成功!')
        this.pagingQuery()
      } else {
        this.$message(res.message)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.contents {
  padding: 10px 20px;

  .el-butotn-div {
    position: absolute;
    right: 0%;
    top: 0%;
    background: #1890ff;
    color: #fff;
    height: 100%;
    width: 150px;
    padding: 0 10px;

    .div-layout {
      display: flex;
      justify-content: space-between;
      align-items: center;
      vertical-align: middle;
      height: 100%;
      cursor: pointer;
    }
  }
}
</style>
